<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        插值表达式：vue的一种模版语法
        作用：利用表达式进行插值渲染
        语法{{ 表达式 }}

        插值表达式注意点：
        1.使用的表达式要存在
        2.支持的是表达式不是语句
        3.不能在标签属性使用
    -->
    <div id="app">
        <p>{{ nickname }}</p>
        <p>{{ nickname.toUpperCase() }}</p>  
        <p>{{ nickname + "你好我是增婉之" }}</p>
        <p>{{ age>18 ? '成年' : '未成年' }}</p>
        <p>{{ friend.name }}</p>
        <p>{{ friend.desc }}</p>
        <!-- 该表达式不存在  -->
        <!-- <p>{{ name }}</p> -->
         <!-- 不是表达式 -->
        <!-- <p>{{ if }}</p> -->
         <!-- 不能再标签属性中使用 -->
        <!-- <p title="{{ nickname }}"></p> -->
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                nickname:'qxb',
                age:20,
                friend:{
                    name:'增婉之',
                    desc:'大美女'
                }
            }
        })
    </script>
</body>
</html>